<template>
    <view class="globe_back">
        <view class="box">
            <view class="wallet" style="background: url('@/static/imgs/walletbg.png') no-repeat; background-size: 100%">
                <view class="myMoney">我的佣金(元)</view>
                <view class="moneyNumber">456456.25</view>
                <view class="Withdrawal flex justify_content_between">
                    <view>可提现：￥0.00</view>
                    <view>已提现：￥121.00</view>
                </view>
            </view>
            <!-- 资金记录 -->
            <view class="flex justify_content_between">
                <view class="title">资金记录</view>
                <view class="mintitle" @click="nameShow = true">
                    提现规则
                    <image class="rule" :src="url + 'icon_txgz.png'"></image>
                </view>
            </view>
            <view class="list flex flex_wrap" v-for="item in list">
                <view class="left">
                    <text>服</text>
                </view>
                <view class="center">
                    <text class="num">{{ item.number }}</text>
                    <br />
                    <text class="time">{{ item.time }}</text>
                </view>
                <view class="right">+{{ item.money }}</view>
            </view>
        </view>
        <!-- 提现规则弹窗 -->
        <u-popup :show="nameShow" mode="center" @close="close" round="8">
            <view class="p_32">
                <view class="nameTitle fw_bold f_32 mt_8">提现规则</view>
                <view class="tc_text">
                    <text>1.当佣金少于500时只能在每月5号提现。</text>
                    <br />
                    <text>2.当佣金等于或大于500时可在24小时后提现。</text>
                </view>
                <view class="flex justify_content_between">
                    <view class="nameBtn back_3377FF cl_fff f_32 br_8" @click="close">知道了</view>
                </view>
            </view>
        </u-popup>
        <view style="height: 20px"></view>
        <view style="height: 100rpx"></view>
        <view class="addBtn back_3377FF br_24 cl_fff mt_24">提现</view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            url: '',
            list: [],
            nameShow: false
        };
    },
    onShow() {
        this.url = this.baseUrl + this.imgPath;
    },
    onLoad() {
        this.getList();
    },
    methods: {
        getList() {
            this.list = [
                {
                    number: '544465456454',
                    time: '2012-15-12 12:25:05',
                    money: '124.00'
                },
                {
                    number: '544465456454',
                    time: '2012-15-12 12:25:05',
                    money: '124.00'
                },
                {
                    number: '544465456454',
                    time: '2012-15-12 12:25:05',
                    money: '124.00'
                }
            ];
        },
        close() {
            this.nameShow = false;
        }
    }
};
</script>

<style scoped lang="scss">
.addBtn {
    width: 686rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    margin: 24px auto;
    position: fixed;
    bottom: 80rpx;
}
.box {
    padding: 32rpx;
    .wallet {
        padding: 32rpx;
        color: #fff;
        margin-bottom: 40rpx;
    }
    .myMoney {
        font-size: 28rpx;
        margin-top: 40rpx;
    }
    .moneyNumber {
        font-size: 52rpx;
        margin-top: 16rpx;
    }
    .Withdrawal {
        margin-top: 48rpx;
        font-size: 28rpx;
        padding-bottom: 10rpx;
    }
    .title {
        color: #00091a;
        font-size: 32;
        font-weight: bold;
    }
    .mintitle {
        color: #999ca3;
        font-size: 28rpx;
        .rule {
            width: 28rpx;
            height: 28rpx;
        }
    }
    .list {
        background: white;
        border-radius: 16rpx;
        padding: 32rpx;
        margin-top: 24rpx;
        .left {
            width: 96rpx;
            height: 96rpx;
            text-align: center;
            line-height: 96rpx;
            border-radius: 16rpx;
            background: #f4f8ff;
            width: 20%;
            color: #3377ff;
            display: inline-block;
            margin: 0 16rpx;
            font-weight: bold;
        }
        .center {
            width: 50%;
            margin-top: 8rpx;
            .num {
                color: #00091a;
                font-size: 28rpx;
            }
            .time {
                color: #ccced1;
                font-size: 24rpx;
                margin-top: 8rpx;
            }
        }
        .right {
            width: 20%;
            color: #3377ff;
            font-size: 36rpx;
            margin-top: 22rpx;
            text-align: right;
        }
    }
}
.nameTitle {
    text-align: center;
}
.tc_text {
    line-height: 60rpx;
    font-size: 28rpx;
    color: #00091a;
    margin: 48rpx 0;
}
.nameBtn {
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
}
</style>
